<template>
	<div class="div1">
		<div style="background: #F6F5F7;">
			<div class="tong three">
				<ul class="navgator">
					<li class="navgatorLi" :class="{ 'isActive': index == navgatorIndex }" @click="handleLeft(index)"
						v-for="(item, index) in navgator" :key="index">{{ item }}</li>
				</ul>
				<div class="gerenxinxi" v-if="navgatorIndex == 0">
					<div class="top">
						<img class="userImg" :src="image_url ? image_url : '../../../static/logo.png'" />
						<div class="userName">{{ nickName }}<span class="vip" v-if="relationId">会员用户</span></div>
					</div>
					<div class="updates">
						<div class="ups">
							<div class="upL">会员用户</div>
							<div class="upR"><input class="upName" :value="nickName" placeholder="请输入昵称" /></div>

						</div>
						<div class="ups">
							<div class="upL">性别</div>
							<div class="upR"><el-radio-group v-model="gender" text-color="#EA7408">
									<el-radio label="女生"></el-radio>
									<el-radio label="男生"></el-radio>
								</el-radio-group></div>
						</div>
						<!--						<div class="ups">-->
						<!--							<div class="upL">出生日期</div>-->
						<!--							<div class="upR"><el-select v-model="year" placeholder="请选择年份" style="width:100px;">-->
						<!--								<el-option v-for="(item,index) in yearList" :key="index" :label="item" :value="item">-->
						<!--								</el-option>-->
						<!--							</el-select>&nbsp;&nbsp;年&nbsp;&nbsp;-->
						<!--							<el-select v-model="yue" placeholder="请选择月份" style="width:100px;">-->
						<!--								<el-option v-for="(item,index) in 12" :key="index" :label="index+1" :value="index+1">-->
						<!--								</el-option>-->
						<!--							</el-select>&nbsp;&nbsp;月&nbsp;&nbsp;-->
						<!--							<el-select v-model="day" placeholder="请选择日期" style="width:100px;">-->
						<!--								<el-option v-for="(item,index) in 31" :key="index" :label="index+1" :value="index+1">-->
						<!--								</el-option>-->
						<!--							</el-select>&nbsp;&nbsp;日</div>-->
						<!--						</div>-->
						<div class="ups">
							<div class="upL">电话</div>
							<div class="upR"><input class="upName" :value="phone" disabled /></div>
						</div>
						<!--						<button class="btns" @click="baocun()">保存</button>-->
					</div>
				</div>
				<div class="gerenxinxi" v-if="navgatorIndex == 1">
					<div class="zhanghu">
						<div class="zhanghuTop">
							<img class="iconImg" src="../../assets/order/phone.png" />
							<div class="phoneName">手机号</div>
							<div class="phoneNum">{{ phone }}</div>
						</div>
						<button class="xiugai" @click="tiaozhuan(1)">修改手机号</button>
					</div>
					<div class="zhanghu">
						<div class="zhanghuTop">
							<img class="iconImg" src="../../assets/order/tixian.png" />
							<div class="phoneName">提现账号</div>
							<div class="phoneNum">设置提现账号便于提现服务</div>
						</div>
						<button class="xiugai" @click="tiaozhuan(2)">设置提现账号</button>
					</div>
				</div>
				<!-- 修改手机号 -->
				<el-dialog title="修改手机号" customClass="customWidth" :visible.sync="dialogFormVisible" center>
					<div class="ups">
						<div class="upL upL2">手机号</div>
						<div class="upR"><input class="upName" v-model="phone" placeholder="请输入手机号" /></div>
					</div>
					<div class="ups">
						<div class="upL upL2">验证码</div>
						<div class="upR"><input class="upName" v-model="yanzhengma" placeholder="请输入验证码" /></div>
						<button type="button" v-if="show == true" class="logins logins1" @click="yzmBtn()">获取验证码</button>
						<button type="button" v-if="show == false" class="logins logins1">{{ count }}秒后重新获取</button><br />
					</div>

					<div slot="footer" class="dialog-footer" style="margin-top: 30px;text-align: center;">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="queren()">确 定</el-button>
					</div>
				</el-dialog>
				<!-- 设置提现账号 -->
				<el-dialog title="设置提现账号" customClass="customWidth" :visible.sync="dialogFormVisibleT" center>
					<div class="ups">
						<div class="upL upL2">收款人姓名</div>
						<div class="upR"><input class="upName" v-model="zhifubaoName" placeholder="请输入提现账号" /></div>
					</div>
					<div class="ups">
						<div class="upL upL2">提现账号</div>
						<div class="upR"><input class="upName" v-model="zhifubao" placeholder="请输入提现账号" /></div>
					</div>
					<div slot="footer" class="dialog-footer" style="margin-top: 30px;text-align: center;">
						<el-button @click="dialogFormVisibleT = false">取 消</el-button>
						<el-button type="primary" @click="querenT()">确 定</el-button>
					</div>
				</el-dialog>


			</div>
		</div>
	</div>
</template>

<script>
import goodsItem from "../../components/goods-item";
import Head from '@/components/head.vue'
import Foots from '@/components/foots.vue'
export default {
	components: {
		Head,
		Foots,
		goodsItem
	},
	data() {
		return {
			searchList: ['粽子', '防晒霜', '洗衣液', '蚊香液', '抽纸', '零食'],
			navgator: ['个人信息', '账户安全'],
			navgatorIndex: 0,
			username: '小慕秋',
			axe: '女生',
			year: '',
			yue: '',
			day: '',
			phone: '',
			yearList: ['2020', '2019', '2018', '2017', '2016', '2015', '2010', '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002', '2001', '2000', '1999'],
			relationId: '',
			gender: '男生',
			nickName: '匿名',
			dialogFormVisible: false,
			dialogFormVisibleT: false,
			zhifubao: '',
			zhifubaoName: '',
			count: '',
			timer: null,
			show: true,
			runCode: '获取验证码',
			yanzhengma: '',

		}
	},
	mounted() {
		this.userSelect()
	},
	watch: {},
	methods: {
		handleLeft(index) {
			this.navgatorIndex = index
		},
		baocun() {
			if (this.username == '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入昵称',
					type: 'warning'
				});
				return
			} else {
				console.log('提交保存')
			}
		},
		tiaozhuan(index) {
			if (index == 1) {
				this.dialogFormVisible = true
			} else {
				this.dialogFormVisibleT = true
			}

			// this.$router.push({
			//   path: '/empty'
			// })
		},
		// 获取用户信息
		userSelect() {
			let userId = this.$cookie.get('userId')
			this.$http({
				url: this.$http.adornUrl('/user/' + userId),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data.status == 0) {

					this.relationId = data.data.relationId
					this.image_url = data.data.image_url
					this.nickName = data.data.nickName
					this.phone = data.data.phone
					this.gender = data.data.gender == 1 ? '男生' : '女生'
					if (data.data.zhifubao) {
						this.zhifubao = data.data.zhifubao
					} else {
						this.zhifubao = ''
					}
					if (data.data.zhifubaoName) {
						this.zhifubaoName = data.data.zhifubaoName
					} else {
						this.zhifubaoName = ''
					}

				}
			})
		},
		// 确认修改手机号
		queren() {
			let userId = this.$cookie.get('userId')
			this.$http({
				url: this.$http.adornUrl('/user/updatePhone'),
				method: 'post',
				params: this.$http.adornParams({
					'userId': userId,
					'phone': this.phone,
					'msg': this.yanzhengma,
				})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dialogFormVisibleT = false
							this.userSelect()

						}
					})
				} else {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: data.msg,
						type: 'warning'
					});
				}
			})
		},
		// 确认提现账号
		querenT() {
			let userId = this.$cookie.get('userId')
			this.$http({
				url: this.$http.adornUrl('cash/userinfo'),
				method: 'post',
				params: this.$http.adornParams({
					'userId': userId,
					'zhifubao': this.zhifubao,
					'zhifubaoName': this.zhifubaoName,
				})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.dialogFormVisibleT = false
							this.userSelect()

						}
					})
				} else {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: data.msg,
						type: 'warning'
					});
				}
			})
		},
		// 注册获取验证码
		yzmBtn() {
			if (this.phone == '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入手机号',
					type: 'warning'
				});
				return
			}
			if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请输入有效的手机号',
					type: 'warning'
				});
				return
			}
			this.$http({
				url: this.$http.adornUrl('/user/sendMsg/' + this.phone + '/register'),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data.status == 0) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '验证码发送成功请接收查看',
						type: 'success'
					});
					this.isNew = data.data
					this.djs()
				} else {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: data.msg,
						type: 'warning'
					});
					return
				}
			})
		},
		// 倒计时
		djs() {
			const TIME_COUNT = 60;
			if (!this.timer) {
				this.count = TIME_COUNT;
				this.show = false;
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						this.show = true;
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000)
			}
		},
	}
}
</script>

<style scoped="scoped">
.div1 {
	/* height: 50vh; */
	overflow-x: hidden;
}


/* 第一部分 */
.tong {
	width: 1200px;
	margin: 0 auto;
	margin-top: 15px;
}

.three {
	margin-bottom: 20px;
	background: #fff;
}

.navgator {
	/* width: 200px; */
	position: relative;
	top: 0;
	border-bottom: 1px solid #efefef;
	line-height: 50px;

}

.navgatorLi {
	display: inline-block;
	justify-content: center;
	align-items: center;
	border-top: none;
	margin: 0 20px;
	cursor: pointer;
}

.isActive {
	color: #EA7408;
	border-bottom: 3px solid #EA7408;
}

.gerenxinxi {
	padding: 20px;
	box-sizing: border-box;
}

.userImg {
	width: 80px;
	height: 80px;
	margin-right: 20px;
	float: left;
}

.userName {
	line-height: 80px;
	font-size: 18px;
	color: #333;
}

.vip {
	margin-left: 10px;
	display: inline-block;
	font-size: 12px;
	color: #EA7408;
	padding: 2px 4px;
	background: #FFE5EA;
	height: 18px;
	line-height: 18px;
}

.updates {
	margin-top: 20px;

}

.ups {
	margin: 20px 0;
	color: #333;
	font-size: 16px;
	line-height: 30px;
}

.ups div {
	display: inline-block;
}

.upL {
	width: 100px;
}

.upL2 {
	width: 200px;
	text-align: right;
}

.upName {
	height: 28px;
	line-height: 28px;
	border: 1px solid #999;
	width: 200px;
	padding-left: 10px;
}

.btns {
	margin-top: 20px;
	width: 180px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	background: #EA7408;
	border: 1px solid #EA7408;
	font-size: 15px;
}

.zhanghu {
	display: inline-block;
	width: 24%;
	margin-right: 1%;
	padding: 20px;
	box-sizing: border-box;
	height: 364px;
	background: #FFFAFB;
}

.zhanghuTop {
	height: 200px;
	text-align: center;
	padding: 50px 0;
	box-sizing: border-box;
}

.phoneName {
	margin-top: 10px;
	font-size: 20px;
	line-height: 30px;
}

.phoneNum {
	margin-top: 10px;
	font-size: 16px;
	color: #999;
}

.xiugai {
	width: 80%;
	height: 36px;
	margin: 10%;
	background: transparent;
	border: 1px solid #333;
	color: #333;
	font-size: 14px;
}

.logins {
	margin: 20px 5%;
	height: 30px;
	width: 130px;
	line-height: 30px;
	/*padding-left: 15px;*/
	font-size: 14px;
	border: 1px solid #F4F4F4;
	border-radius: 4px;
	background: #fff;
	color: #EA7408;
}

.logins1 {
	margin: 20px 0;
	border: 1px solid #EA7408;
	border-radius: 4px;
	background: #fff;
	color: #EA7408;
	text-align: center;
}

/deep/.upR .el-radio-group .el-radio .el-radio__input.is-checked .el-radio__inner{
	background: #EA7408 !important;
	border-color: #EA7408 !important;
	/* 选中状态的颜色 */
}
/deep/.upR .el-radio-group .el-radio.is-checked .el-radio__label{
	color: #EA7408 !important;
	/* 选中状态的颜色 */
}
</style>
